<template>
  <!--菜单项、导航项的操作按钮组-->
  <el-dropdown style="float:right;vertical-align: middle;">
    <span class="el-dropdown-link">
      <el-icon class="el-icon--right">
        <tools  style="width: 1.0em; height: 1.0em; margin-right: 0px;"/>
      </el-icon>
    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item @click="addMenu">添加</el-dropdown-item>
        <el-dropdown-item @click="modMenu">修改</el-dropdown-item>
        <el-dropdown-item @click="delMenu">删除</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script>
  // import { reactive } from 'vue'
  import { ElDropdown, ElDropdownMenu, ElDropdownItem, ElIcon  } from 'element-plus'
  import { Tools } from '@element-plus/icons-vue'
  // 状态
  // import { store } from '@naturefw/nf-state'
</script>

<script setup>

  const props = defineProps({
    subMenu: Array,
    current: Object,
    dialogAddInfo: Object,
    dialogModInfo: Object,
    menu: Object,
    index: Number
  })

  // 当前菜单、文档内容，菜单列表
  // const { current, menuList } = store

  const { 
    subMenu,
    menu,
    dialogAddInfo,
    dialogModInfo
  } = props
  
  // 添加菜单项
  const addMenu = (e) => {
    e.stopPropagation()
    dialogAddInfo.parentMenu = subMenu
    dialogAddInfo.menu = menu
    dialogAddInfo.index = props.index
    dialogAddInfo.isShow = true
    // console.log(menu, props.index)
  }
  
  // 修改菜单项
  const modMenu = (e) => {
    e.stopPropagation()
    dialogModInfo.menu = menu
    dialogModInfo.isShow = true
  }

  // 删除菜单项
  const delMenu = (e) => {
    e.stopPropagation()
    // 子菜单也删除了。
    subMenu.splice(props.index, 1)

    // 保存到 indexedDB 
    props.dialogAddInfo.savaMenuList()
  }
  

</script>